In this step of the tutorial you create the application navigation to allow the user to switch between the application screens. You also highlight the navigation button for the application the user selects.
Create the layout for the application navigation
In this section you create the layout for the navigation buttons at the bottom of the application user interface. You use the navigation buttons to navigate between the Home, Media, and Car applications.
One of the characteristics of the Page and Page Host nodes is that the content of all active Page and Page Host nodes in an application is always shown. Because the RootPage node is at the top of the hierarchy it is always active and all the content in the RootPage node is always shown on all Page and Page Host nodes in the application. This is why RootPage node is a good place to hold the navigation buttons for the whole application.
To create the layout for the application navigation:
In the Projectpress Alt and right-click the RootPage node, select Empty Node 2D, name it Navigation, and in the Properties add and set:
Layout Height to 179
Vertical Alignment to Bottom
Background Brush to + Texture Brush, name it FooterBrush, click next to the property name, and set the Brush Texture property of the brush to the Footer texture.
TIP
In the Properties click next to a property to access and edit the resource to which the property points without moving away from the currently selected node.
In the Projectpress Alt and right-click the Navigation node, select Grid Layout 2D, and in the Properties:
In the Columns click to remove one column. You need four columns in the Grid Layout 2D node because there are four buttons in the navigation.
Set both columns to Proportional, and set the proportional value of the first column to 3. This way each button takes an equal amount of space in the Grid Layout 2D node. You create three buttons to navigate between the pages in the application, and one separate button to open a page as a popup window.
In the Rows click to remove all but one row. You need only one row in the Grid Layout 2D node because there is only one row of buttons in the navigation.
Add and set Horizontal Alignment to Stretch. When you set the Horizontal Alignment property to Stretch you tell the node to take as much space on the x axis as it can.
Add and set Vertical Alignment to Bottom.
In the Project in the Grid Layout 2D create a Toggle Button Group 2D node, name it ApplicationsNavigation, and inside it create a Grid Layout 2D node. You use the Toggle Button Group 2D node to hold the navigation buttons, and the Grid Layout 2D node to position them.
In the Project select the Grid Layout 2D node you created in the previous step and in the Properties:
Set all columns to Proportional.
In the Rows click to remove all but one row.
Add and set Horizontal Alignment to Stretch. When you set the Horizontal Alignment property to Stretch you tell the node to take as much space on the x axis as it can.
Add and set Vertical Alignment to Bottom.
When you click the Page Host node Home in the Pages window, the application transitions to that page.
Create the toggle button which navigates to the Home node
In this section you create the toggle button you use to navigate to the Home node of the application.
To create the toggle button which navigates to the Home node:
In the Project in the ApplicationsNavigation > Grid Layout 2D node create a Toggle Button 2D node, name it HomeButton, and inside it create an Image node.
In the Project select the HomeButton node, and in the Properties add and set:
Toggle State to 1 You set the HomeButton toggle button to be selected by default when you start your application.
Horizontal Alignment to Center
Index in Group to -1 Kanzi uses the Index in Group property to keep track of which Toggle Button is selected in a Toggle Button Group node. When the value of the Index in Group property is -1 the Toggle Button Group node sets the index for that Toggle Button.
TIP
To add a property, right-click in the Properties, select Add Property, and then select the property you want to add. For example, to add the Index in Group property, right-click in the Properties, and select Add Property > Button > Index in Group.
In the Project select the HomeButton node and in the State Tools click Create State Manager to create a state manager. You can find the State Tools at the bottom of the Kanzi Studio interface, below the Preview.
In the State Tools click Create State to create a state. Create two states, double-click the state names, and name them NotSelected and Selected.
In the Project select the HomeButton > Image node, in the Properties set the Image property to the Btn_Home texture, and in the State Tools click to save the change to the NotSelected state.
Set the Image property to the Btn_Home_Selected texture and in the State Tools click to save the change to the Selected state.
In the State Tools click the <No Controller Property> dropdown menu and select the Button > Toggle State property. In a state manager the value of the property you select as the Controller Property defines the conditions when each state in a state group is active.
In the State Tools set the value of the Toggle State controller property for each state. For the Selected state set the value to 1, and for the NotSelected state leave the value set to 0. With this setting when the value of the Toggle State property is 0 in the node which uses this state manager, the state manager sets the application state to the NotSelected state, and when it is 1 it sets the application state to the Selected state.
In the State Tools click Edit State Manager to deactivate the State Tools.
TIP
When State Tools are switched on Kanzi Studio keeps track of all property changes in your project. For this reason it is a good practice to switch the State Tools off when you are done setting the states in a specific state manager.
In the Project select the HomeButton node, in the State Tools click the Any -> Any transition, in the State Transition Editor set the Duration property to 0, and click Save. In a State Transition Editor when you set the Duration property to 0 Kanzi transitions instantly between the selected states.
In the Project select the HomeButton > Image node, in the Properties right-click the Image property and select Remove. The value you set for a property in a state manager overrides the local value of that property. You can remove the Image property because the HomeButton node uses a state manager which sets that property.
In the Project select the HomeButton node, in the Node Components > Triggers section in the Toggle Button: Toggled On trigger click the Add dropdown menu, select the Navigate to Page action, and in the Navigate to Page action window select the Home node.
Create the toggle buttons which navigate to the Media and Car nodes
In this section you create the toggle buttons you use to navigate to the Media and Car nodes of the application.
To create the toggle buttons which navigate to the Media and Car nodes:
In the Project right-click the HomeButton node, select Duplicate, press the F2 key, and rename the new node to MediaButton.
In the Project select the MediaButton node and in the Properties remove the Toggle State property. You remove this property because when you start the application only the HomeButton toggle button is toggled on, while all other navigation buttons are toggled off.
In the Library > State Managers right-click the HomeButton State Manager, select Duplicate, and rename it to MediaButton State Manager.
In the Project select the MediaButton node and in the Properties set the State Manager property to MediaButton State Manager. This way you set the MediaButton State Manager to control the MediaButton node.
In the Library > State Managers > MediaButton State Manager > State Group > NotSelected state select the Image state object and in the Properties set the Image property to Btn_Media. This way you set the MediaButton to show the Btn_Media texture when the toggle button is in the NotSelected state.
In the Library > State Managers > MediaButton State Manager > State Group > Selected state select the Image state object and in the Properties set the Image property to Btn_Media_Selected. This way you set the MediaButton to show the Btn_Media_Selected texture when the toggle button is in the Selected state.
Repeat the previous steps to create the CarButton toggle button and its state manager. For this state manager in the Image state object use these textures:
For the NotSelected state use the Btn_Car texture.
For the Selected state use the Btn_Car_Selected texture.
In the Project select the MediaButton node, in the Node Components > Triggers section in the Toggle Button: Toggled On trigger click the Navigate to Page action, and in the Navigate to Page action window select the Media node.
Repeat the previous step for the CarButton toggle button but in the Navigate to Page action window select the Car node.
When you restart the Preview and click the Home, Media, and Car buttons in the Preview you go to the Page nodes you set in the Navigate to Page actions.
Create the toggle button which opens the Settings popup window
In this section you create the toggle button which you use to navigate to the Settings popup window. You create this toggle button outside of the Toggle Button Group that holds the other navigation toggle buttons, because the toggle button that navigates to the Settings popup window must stay toggled on when the Settings popup window is open. In the last step of this tutorial you use the Kanzi Engine API to create the functionality for that toggle button.
To create the toggle button which opens the Settings popup window:
In the Projectpress Alt and right-click the Navigation > Grid Layout 2D node, select Toggle Button 2D, name it SettingsButton, and inside it create an Image node.
In the Library > State Managers duplicate one of the state managers you created, rename that state manager to SettingsButton State Manager, and in the Image state object use these textures:
For the NotSelected state use the Btn_Settings texture.
For the Selected state use the Btn_Settings_Selected texture.
In the Project select the SettingsButton node and in the Properties add and set:
State Manager property to SettingsButton State Manager.
Horizontal Alignment property to Center.
TIP
In the Interact mode you can interact with your application in the Preview window as you would on a device. When you are using a Preview tool, to switch to the Interact mode, in the Preview window click .
next to the property name, and set the Brush Texture property of the brush to the texture.
to remove one column.
to save the change to the NotSelected state.
.